Angular Material Select কম্পোনেন্টটি একটি ড্রপডাউন সিলেক্ট লিস্ট তৈরির জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের কাছে একটি পরিষ্কার এবং স্বচ্ছল ইন্টারফেসে বিভিন্ন অপশন সিলেক্ট করার সুযোগ দেয়। Angular Material Select কম্পোনেন্টটি সাধারণ HTML সিলেক্ট ট্যাগের মতো কাজ করে তবে এটি আরও আধুনিক এবং উন্নত ডিজাইন ও ফিচার সরবরাহ করে, যেমন ইমেজ সহ অপশন, মাল্টিপল সিলেকশন, এবং কাস্টমাইজড লেবেল ইত্যাদি।

Material Select এর সুবিধা

• ব্যবহারকারীর অভিজ্ঞতা উন্নত করা: Angular Material Select সিলেক্ট লিস্টের ডিজাইন উন্নত করে, যা অধিক কার্যকর এবং সুন্দর।
• রেসপন্সিভ ডিজাইন: এটি সমস্ত ধরনের ডিভাইসের জন্য উপযোগী।
• সহজ কাস্টমাইজেশন: আপনি লেবেল, অপশন, আউটপুট ইভেন্ট এবং আরও অনেক কিছু কাস্টমাইজ করতে পারবেন।
• অ্যাক্সেসিবিলিটি: Angular Material Select অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড মেনে চলে, যা স্ক্রিন রিডার এবং কীবোর্ড নেভিগেশনের জন্য উপযুক্ত।

Material Select ব্যবহার করার ধাপসমূহ

১. Angular Material এর Select মডিউল ইমপোর্ট করা

প্রথমে, MatSelectModule মডিউলটি app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatSelectModule } from '@angular/material/select';

@NgModule({
  imports: [
    MatSelectModule
  ]
})
export class AppModule { }

২. HTML এ Material Select ব্যবহার করা

এখন, আপনার HTML ফাইলে mat-select ট্যাগ ব্যবহার করে সিলেক্ট ড্রপডাউন তৈরি করতে হবে। এর মধ্যে mat-option ট্যাগ ব্যবহার করে অপশনগুলো নির্ধারণ করতে হবে।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

• mat-form-field: এটি একটি Angular Material ফর্ম ফিল্ড, যা সিলেক্টের লেবেল এবং আউটপুট স্টাইল কাস্টমাইজ করতে সাহায্য করে।
• mat-label: সিলেক্ট ফিল্ডের লেবেল হিসেবে কাজ করে।
• mat-select: এটি মূল সিলেক্ট কম্পোনেন্ট।
• mat-option: সিলেক্ট অপশনগুলো নির্ধারণ করতে ব্যবহৃত হয়।

৩. Angular Form এ Material Select ব্যবহার করা

যদি আপনি Angular Reactive Forms বা Template-driven Forms ব্যবহার করতে চান, তবে FormControl ব্যবহার করতে হবে।

Reactive Forms ব্যবহার করে:

import { FormControl } from '@angular/forms';

export class AppComponent {
  selectedOption = new FormControl('');
}

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [formControl]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

Template-driven Forms ব্যবহার করে:

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(ngModel)]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

৪. সিলেক্ট অপশন ডাইনামিকভাবে লোড করা

Angular Material Select এ আপনি ডাইনামিক অপশনও যোগ করতে পারেন। উদাহরণস্বরূপ, আপনি একটি লিস্ট বা অ্যারে থেকে অপশনগুলো লোড করতে পারেন।

export class AppComponent {
  options = ['Option 1', 'Option 2', 'Option 3'];
}

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(ngModel)]="selectedOption">
    <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
  </mat-select>
</mat-form-field>

৫. Multiple Selection (একাধিক অপশন সিলেকশন)

Material Select কম্পোনেন্টটি একাধিক অপশন সিলেক্ট করতে সমর্থন করে। এর জন্য multiple অ্যাট্রিবিউট ব্যবহার করতে হয়।

<mat-form-field appearance="fill">
  <mat-label>Choose options</mat-label>
  <mat-select multiple [(ngModel)]="selectedOptions">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

• multiple: একাধিক অপশন সিলেক্ট করার জন্য।

৬. Custom Option (কাস্টম অপশন) ব্যবহার করা

আপনি চাইলে mat-option এর ভিতরে আরও কাস্টম কন্টেন্ট (যেমন, ছবি) যোগ করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select>
    <mat-option value="option1">
      <img src="path/to/image1.jpg" alt="Image 1"> Option 1
    </mat-option>
    <mat-option value="option2">
      <img src="path/to/image2.jpg" alt="Image 2"> Option 2
    </mat-option>
  </mat-select>
</mat-form-field>

Material Select এর অতিরিক্ত বৈশিষ্ট্য

1. Searchable Dropdown: Angular Material Select এ আপনি সার্চ ফিচারও যোগ করতে পারেন, যার মাধ্যমে ব্যবহারকারী দ্রুত অপশন খুঁজে পেতে পারেন।
2. Error Messages: ফিল্ড ভ্যালিডেশন এবং এরর মেসেজ সাপোর্ট।
3. Disabling Select: আপনি Select কম্পোনেন্টকে ডisable করতে পারেন [disabled] অ্যাট্রিবিউট ব্যবহার করে।

<mat-select [disabled]="isDisabled">
  <mat-option value="option1">Option 1</mat-option>
  <mat-option value="option2">Option 2</mat-option>
</mat-select>

Angular Material Select হল একটি অত্যন্ত কার্যকর এবং কাস্টমাইজযোগ্য ড্রপডাউন কম্পোনেন্ট, যা Angular অ্যাপ্লিকেশনে ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন বৈশিষ্ট্য যেমন একাধিক অপশন সিলেকশন, কাস্টম অপশন, এবং ডাইনামিক অপশন লোডিং সমর্থন করে। Angular Material Select ব্যবহার করে আপনি সহজেই সুন্দর, রেসপন্সিভ, এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এমন সিলেক্ট লিস্ট তৈরি করতে পারবেন।